<template>
    <el-card class="box-card">
        <div class="box-card-header">
            <el-button type="primary" @click="addHandler">新增</el-button>
            <el-tooltip effect="dark" content="刷新" placement="bottom">
                <el-icon class="box-item" @click="refHandler">
                    <Refresh />
                </el-icon>
            </el-tooltip>
        </div>
        <el-tree :data="dataList" :props="{ label: 'name', children: 'child' }" node-key="id">
            <template #default="{ node, data }">
                <div class="tree-list">
                    <p>
                        <el-tag size="small" :type="data.menu ? '' : 'info'">{{ data.menu ? "菜单" : "权限" }}</el-tag>
                        <el-icon v-if="data.icon" :size="16">
                            <component :is="data.icon"></component>
                        </el-icon>
                        <span>{{ data.name }}</span>
                    </p>
                    <p>
                        <el-switch v-model="data.status" :active-value="1" :inactive-value="0" />
                        <el-button size="small" text type="primary">修改</el-button>
                        <el-button size="small" text type="primary">增加</el-button>
                        <el-button size="small" text type="primary">删除</el-button>
                    </p>
                </div>
            </template>
           
        </el-tree>
        
        <el-drawer v-model="drawer" :width="400">
            <template #header>
                <h4>新增</h4>
                
            </template>
            <template #default>
                <el-form label-width="120px" v-model="addForm">
                    <el-form-item label="上级菜单">
                        <el-cascader v-model="addForm.rule_id" 
                        :options="roleList" 
                        :props="{value:'id', label:'name',children:'child',checkStrictly:true,emitPath:false }"
                        placeholder="请选择上级菜单">
                            <template #default="{ node, data }">
                                <span>{{ data.name }}</span>
                                <span v-if="!node.isLeaf">({{ data.child.length }})</span>
                            </template>
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="菜单/规则">
                        <el-radio-group v-model="addForm.menu">
                            <el-radio :label="1" border>菜单</el-radio>
                            <el-radio :label="0" border>规则</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="名称">
                        <el-input v-model="addForm.name" placeholder="Please input" />
                    </el-form-item>
                    <el-form-item label="菜单/图标" v-show="addForm.menu === 1">
                        <MyIconSelect v-model="addForm.icon" @modelValue="modelValueHandler"></MyIconSelect>
                    </el-form-item>
                    <el-form-item label="前端路由" v-show="addForm.menu === 1">
                        <el-input v-model="addForm.frontpath" placeholder="Please input" />
                    </el-form-item>
                    <el-form-item label="后端规则" v-show="addForm.menu === 0">
                        <el-input v-model="addForm.condition" placeholder="Please input" />
                    </el-form-item>
                    <el-form-item label="请求方式" v-show="addForm.menu === 0">
                        <el-select v-model="addForm.method" placeholder="请选择请求方式">
                            <el-option :label="item" :value="item" v-for="item in ['GET','POST','PUT','DELETE']"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="排序" >
                        <el-input-number v-model="addForm.order" :min="1" :max="50"  />
                    </el-form-item>
                    <!-- <el-form-item label="上级菜单" >
                        <el-input v-model="addForm.input8" placeholder="Please input" />
                    </el-form-item> -->
                </el-form>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button type="primary" @click="submitHandler">确认</el-button>
                    <el-button>取消</el-button>
                </div>
            </template>
        </el-drawer>
    </el-card>
</template>
<script setup lang='ts'>
import MyIconSelect from '@/components/myIconSelect.vue'
import { jurisdictionListApi , addJurisdictionApi} from '@/api/jurisdiction';
import { ref, reactive } from 'vue'

// 抽屉开关
const drawer = ref(false)

const dataList = ref()
// 次级选择器列表
const roleList = ref()
const name = ref([])


// 新增菜单
const addForm = reactive({
    rule_id: 1,
    icon : '',
    menu: 1,
    name: '',
    method: 'GET',
    status: 1,
    frontpath: '',
    order: 50,
    condition : ''

})

const getJurisdictionList = () => {
    jurisdictionListApi().then(res => {
        console.log(res);
        
        dataList.value = res.data.data.list
        roleList.value = res.data.data.rules

    })
}
getJurisdictionList()

const modelValueHandler = (e:string) => {
    addForm.icon = e
}
// 提交安妮
const submitHandler = () => {
    console.log(addForm);
    
    addJurisdictionApi(addForm).then(res => {
        console.log(res);
        
    })
}
// 抽屉开关按钮
const addHandler = () => {
    drawer.value = true
}
const defaultProps = {
    children: 'children',
    label: 'label',
}
const refHandler = () => {
    console.log(111);

}

</script>
<style lang='scss' scoped>
.box-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 100px;
}

.box-item {
    cursor: pointer;
}

.tree-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
</style>